<!DOCTYPE html>
<html lang="en">
<head>

  <title></title>

</head>
<body>
  <canvas id="domId" width="800" height="800">

  </canvas>
</body>

<script src="dist/A_Star.js"></script>
<script>

  let task = new AStar.Task();
  task.setStart(40,0);
  task.setEnd(40,80);
  task.setWallFromArray([
    35,4,
    35,5,
    35,6,
    35,7,
    35,8,
    35,9,
    35,10,
    35,11,
    35,12,
    35,13,
    35,14,
    35,15,
    35,16,
    35,17,
    35,18,
    35,19,
    35,20,
    35,21,
    35,22,
    35,23,
    35,24,
    35,25,
    35,26,
    35,27,
    35,28,
    35,29,
    35,30,
    35,31,
    35,32,
    35,33,
    35,34,
    35,35,
    35,36,
    35,37,
    35,38,
    35,39,
    45,4,
    45,5,
    45,6,
    45,7,
    45,8,
    45,9,
    45,10,
    45,11,
    45,12,
    45,13,
    45,14,
    45,15,
    45,16,
    45,17,
    45,18,
    45,19,
    45,20,
    45,21,
    45,22,
    45,23,
    45,24,
    45,25,
    45,26,
    45,27,
    45,28,
    45,29,
    45,30,
    45,31,
    45,32,
    45,33,
    45,34,
    45,35,
    45,36,
    45,37,
    45,38,
    45,39,
    35,39,
    36,39,
    37,39,
    38,39,
    39,39,
    40,39,
    41,39,
    42,39,
    43,39,
    44,39

  ]);

  task.findPath();

  let dom = document.getElementById('domId');
  let ctx = dom.getContext('2d');
  let cubeWidth = 10;

  ctx.fillStyle = '#000000';
  for(let i=0; i<task.wallSet.length; i++){
    ctx.fillRect(task.wallSet[i].x*cubeWidth, task.wallSet[i].y*cubeWidth, cubeWidth, cubeWidth);
  }

  ctx.fillStyle = '#ff0000';
  for(let i=0; i<task.pathSet.length; i++){
    ctx.fillRect(task.pathSet[i].x*cubeWidth, task.pathSet[i].y*cubeWidth, cubeWidth, cubeWidth);
  }

</script>

</html>
